<template>
	<view style="width: 100%;min-height: 100vh;background: #fff;">
		<view class="content">
			<view class="wrap">
				<view class="inputWrap">
					<image @tap="querySubjects" class="inputImg" src="../../static/img/index/61.png"></image>
					<input style="width: 100%;" v-model="talk" placeholder="请输入手机号或用户昵称搜索"
						placeholder-style="font-size:28rpx;color:#595959;" confirm-type="search" @confirm="querySubjects" />
				</view>
				<text @tap="querySubjects">搜索</text>
			</view>
		
			<view @tap="chooseTalk(index)" class="talkText" v-for="(item,index) in talkList" :key="index">
				<image class="userTou" :src="`${httpUrl}/app/file/viewFile?fileId=${item.avatarId}`"></image>
				<text
					:style="{fontSize: '32rpx',color: isChoose == index ? 'rgba(89, 83, 192, 1)' : '#000000'  }">{{item.userName}}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { searchUserByNameOrPhone,addFriend } from '@/utils/api/index.ts'
	const talkList = ref<any>([])
	const talk = ref('')
	const httpUrl = ref(getApp().globalData.baseUrl)
	// 模糊查询
	const querySubjects = async () => {
		const res = await searchUserByNameOrPhone({ data: { keyword: talk.value } })
		talkList.value = res.data
	}
	// 选择话题
	const isChoose = ref<null | number>()
	const chooseTalk = (index : number) => {
		isChoose.value = index
		uni.showModal({
			content: `确定添加${talkList.value[index].userName}为好友吗？`,
			success:async (res)=> {
				if (res.confirm) {
					await addFriend({data:{friendUserId:talkList.value[index].userId}})
					uni.showToast({
						title: '添加成功',
						icon: 'none'
					});
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 92%;
		margin-left: 4%;
		.wrap{
			display: flex;
			align-items: center;
			>text{
				padding: 0 10rpx 0 30rpx;
				font-size: 30rpx;
			}
		}
		.inputWrap {
			flex:1;
			height: 74rpx;
			background: rgba(245, 245, 245, 0.9);
			border-radius: 37rpx;
			display: flex;
			align-items: center;
			position: relative;

			.inputImg {
				width: 32rpx;
				height: 32rpx;
				margin-left: 32rpx;
				margin-right: 10rpx;
			}
		}

		.addTalk {
			font-size: 28rpx;
			color: #8C8C8C;
			position: absolute;
			margin-top: 37rpx;
			right: 4%;
		}

		.talkText {
			margin-top: 32rpx;
			height: 75rpx;
			padding: 0 10rpx 0 10rpx;
			display: flex;
			align-items: center;

			.userTou {
				width: 75rpx;
				height: 75rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}
	}
</style>